<template>
  <div class="hello">
      <div class="left">
        <div class="Selection_sample">
          <h3>选择样图</h3>
          <el-tree :data="itemList"  @node-click="handleNodeClick"></el-tree>
          <!-- <div class="imgItem" v-for="(item,i) in itemList" @click="imgClick(item)" style="width:100%;word-wrap: break-word;">{{i+1}}.{{item}}</div> -->
        </div>
        <div class="selectDiv">
          <div class="Select_content">
            <h3>选择内容</h3>
            <div class="">内容1</div>
            <div class="">内容2</div>
            <div class="">内容3</div>
          </div>
          <div class="Select_object">
            <h3>选择对象</h3>
            <div class="">对象1</div>
            <div class="">对象2</div>
            <div class="">对象3</div>
          </div>
        </div>

      </div>
      <div class="right">
        <div class="rightTop">
          <el-button type="primary" @click="upload">上传</el-button>
          <el-button type="primary"  @click="szxk">设置选框</el-button>
          <el-button type="primary"  @click="sztp">设置图片大小</el-button>
          <el-button type="primary" @click="szh">设置行</el-button>
          <el-button type="primary" @click="szl">设置列</el-button>
          <el-button type="primary">批量设置行</el-button>
          <el-button type="primary">批量设置列</el-button>
          <el-button type="primary" @click="save">保存</el-button>
          <!--用于上传文件-->
          <input class="file-upload" type="file" accept="image/*" id="upd" @change="updChange"/>
        </div>
        <div class="rightMain">
          <!-- <img :src="img" style="width:500px;margin-top:10px;border:2px solid darkorange;"/> -->
          <div class="rightMainContent" :style="'width:'+tpWidth+'px;height:'+tpHeight+'px;background-image:url('+img+');'" v-if="imgShow">
            <div class="box" v-if="rebuild">
              <div class="select_box_line" v-for="(item,i) in select_box_arr" :key="i" >

                    <div class="select_box_column" v-for="(itemi,ii) in item.children" :key="ii" @mousedown="move" @mouseover="over(i,ii)"
                    :style="'width:'+select_box_width+'px;height:'+select_box_height+'px;left:'+(Number(ii*select_box_width)+Number(ii*columnGap))+'px;top:'+(Number(i*select_box_height)+Number(i*lineGap))+'px;'">
                      <!-- {{lineNumber}}{{columnNumber}}{{lineGap}}{{columnGap}} -->
                    </div>

              </div>
            </div>

          </div>

        </div>
      </div>
      <!-- 操作框 -->
      <el-dialog title="设置选框" :visible.sync="szxkVisible">
        宽：<el-input v-model="select_box_width"></el-input>
        高：<el-input v-model="select_box_height"></el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="szxkVisible = false">取 消</el-button>
            <el-button type="primary" @click="szkgSubmit">确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="设置行" :visible.sync="szhVisible">
        行数：<el-input v-model="lineNumber"></el-input>
        行间距：<el-input v-model="lineGap"></el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="szhVisible = false">取 消</el-button>
            <el-button type="primary" @click="szhSubmit">确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="设置列" :visible.sync="szlVisible">
        列数：<el-input v-model="columnNumber"></el-input>
        列间距：<el-input v-model="columnGap"></el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="szlVisible = false">取 消</el-button>
            <el-button type="primary" @click="szlSubmit">确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="设置图片大小" :visible.sync="sztpVisible">
        宽：<el-input v-model="tpWidth"></el-input>
        高：<el-input v-model="tpHeight"></el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="sztpVisible = false">取 消</el-button>
            <el-button type="primary" @click="sztpSubmit">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 图片地址
      img:'',
      // 操作框显隐变量
      szhVisible:false,
      szlVisible:false,
      szxkVisible:false,
      sztpVisible:false,
      // 行数
      lineNumber:1,
      // 列数
      columnNumber:1,
      lineGap:0,
      columnGap:0,
      // 选择框数据
      select_box_arr:[],
      select_box_width:100,
      select_box_height:100,
      // 重新渲染选择框
      rebuild:true,
      // itemList:[
      //   'https://cdn.pixabay.com/photo/2024/04/06/09/18/highland-cow-8678950_960_720.jpg',
      //   'https://cdn.pixabay.com/photo/2024/02/05/17/10/coffee-8554940_960_720.jpg'
      //   ],
      itemList:[{
                label: '一级 1',
                children: [{
                  label: '二级 1-1',
                  children: [{
                    label: 'https://cdn.pixabay.com/photo/2024/02/05/17/10/coffee-8554940_960_720.jpg'
                  }]
                }]
              }],
      tpWidth:1200,
      tpHeight:1800,
      imgShow:true,
      i:0,
      ii:0
    }
  },
  created(){
    this.setBoxArr()
    // for(let i=0;i<this.lineNumber;i++){
    //   this.select_box_arr.push({id:i,children:[]})
    //   for(let j=0;j<this.columnNumber;j++){
    //     this.select_box_arr[i].children.push({id:j,children:[]})
    //   }
    // }
  },
  methods:{
    upload(){
      document.getElementById("upd").click()
    },
    imgClick(e){
      this.img = e
    },
    setBoxArr(){
      this.select_box_arr = []
      for(let i=0;i<this.lineNumber;i++){
        this.select_box_arr.push({id:i,children:[]})
        for(let j=0;j<this.columnNumber;j++){
          this.select_box_arr[i].children.push({id:j,x:(j*this.select_box_width)+(j*this.columnGap),y:(i*this.select_box_height)+(i*this.lineGap)})
        }
      }
    },
    updChange(e){
      console.log(e)
      const windowURL = window.URL || window.webkitURL;
      this.img = windowURL.createObjectURL(e.target.files[0]);
    },
     handleNodeClick(data) {
            console.log(data);
            if(data.children){
              return
            }else{
              this.img = data.label
            }
          },
    save(){
      console.log(this.select_box_arr)
    },
    refalse(){
      this.rebuild = false
    },
    retrue(){
      this.rebuild = true
    },
    szh(){
      this.szhVisible = true
      this.refalse()
    },
    szl(){
      this.szlVisible = true
      this.refalse()
    },
    szxk(){
      this.szxkVisible = true
      this.refalse()
    },
    sztp(){
      this.sztpVisible = true
      this.imgShow = false
      // this.refalse()
    },
    sztpSubmit(){
      this.sztpVisible = false
      this.imgShow = true
    },
    szhSubmit(){
      this.setBoxArr()
      this.retrue()

      this.szhVisible = false

      console.log(this.lineNumber,this.columnNumber,this.select_box_arr)
    },
    szlSubmit(){
      this.setBoxArr()
      this.retrue()
      this.szlVisible = false
    },
    szkgSubmit(){
      this.setBoxArr()
      this.retrue()
      this.szxkVisible = false
    },
    over(i,ii){
      console.log(i,ii)
      this.i = i
      this.ii = ii
    },
     move(e){
                let odiv = e.target;        //获取目标元素
                console.log(e)
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                document.onmousemove = (e)=>{
                //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;
                    let top = e.clientY - disY;

                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;
                    console.log(top,left)
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                    this.select_box_arr[this.i].children[this.ii].x = left
                    this.select_box_arr[this.i].children[this.ii].y = top
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello{
    display:flex;
  }
  .left{
    width:500px;
    overflow:hidden;
  }
  .right{
    /* width:1000px;
    height:100vh; */
  }
  .Select_content,.Select_object,.Selection_sample{
    width:200px;
    height:400px;
    margin-right:10px;
    border:1px solid #ccc;
    overflow:auto;
  }

  #upd{
    display:none;
  }
  .rightTop{
    /* margin-left:300px; */
  }
  .rightMainContent{
    position: relative;
    margin-top:10px;
    /* margin-left:300px; */
    background-repeat: no-repeat;
    background-size:100% 100%;
    border:2px solid darkorange;

  }
  .select_box_column{
    position: absolute;
    display:inline-block;
    background:rgba(255,255,0,0.3);
  }
  .selectDiv{
    display:flex;
    margin-top:20px;
    /* justify-content: space-around; */
  }
</style>
